<!--
 * @description: 循环table
 * @Author: Islands
 * @Date: 2024-03-27 01:41:54
 * @LastEditTime: 2024-03-28 19:21:33
-->
<script lang="ts" setup>
import { ref, reactive, defineProps } from "vue";
import { ITableItem } from "@/types/index.d";
import { Edit, Delete, List } from "@element-plus/icons-vue";
const props = defineProps({
  /**
   * table表格数据集
   */
  tableData: {
    type: Array<any>,
    required: true,
  },
  /**
   * table表格固定常量集合
   */
  items: {
    type: Array<ITableItem>,
    required: true,
  },
});

const tagChange = () => {};
</script>
<template>
  <div class="table" style="width: 100%">
    <el-table :data="tableData" stripe style="width: 100%">
      <template v-for="item in items">
        <!-- index | selection -->
        <el-table-column
          v-if="item.type == 'index' || 'selection'"
          :type="item.type"
          width="55"
        />
        <!-- column -->
        <el-table-column
          v-if="item.type == 'column'"
          :prop="item.prop"
          :label="$t(item.label)"
          align="center"
          :width="item.width"
        />

        <!-- icon 图标 列 -->
        <el-table-column
          v-if="item.type == 'icon'"
          :label="$t(item.label)"
          align="center"
          :width="item.width"
        >
          <template #default="scope">
            <svg-icon size="30" :icon="scope.row[item.prop]"></svg-icon>
          </template>
        </el-table-column>

        <!-- enabled 状态 -->
        <el-table-column
          v-if="item.type == 'enabled'"
          :label="$t(item.label)"
          align="center"
          :width="item.width"
        >
          <template #default="scope">
            <template v-for="os in item.options">
              <el-check-tag
                v-if="os.value == scope.row[item.prop]"
                @change="tagChange"
                checked
                :type="os.type"
                >{{ os.label }}</el-check-tag
              >
            </template>
          </template>
        </el-table-column>

        <!-- 日期列 -->
        <el-table-column
          v-if="item.type == 'date'"
          :label="$t(item.label)"
          align="center"
          :width="item.width"
        >
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
            </div>
          </template>
        </el-table-column>
      </template>
      <!-- 操作按钮 -->
      <el-table-column align="center" :label="$t(`table.operation`)">
        <template #default="scope">
          <div class="btn" :rows="scope.data">
            <slot name="button" />
            <!-- <el-button type="info" link :icon="List">
              {{ $t(`button.details`) }}
            </el-button>
            <el-button type="primary" link :icon="Edit">
              {{ $t(`button.edit`) }}
            </el-button>
            -->
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
}
</style>
